<template>
  <el-card class="enterprise-list-card">
    <h2>企业列表</h2>
    <el-form :inline="true" :model="searchForm" class="search-form" @submit.prevent>
      <el-form-item label="关键词">
        <el-input v-model="searchForm.keyword" placeholder="企业名称/行业" clearable @change="onKeywordInput" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="fetchList">搜索</el-button>
        <el-button @click="() => { searchForm.keyword = ''; searchForm.page = 1; fetchList(); }">重置</el-button>
      </el-form-item>
    </el-form>
    <div v-if="keywordHints.length" class="keyword-hints">
      <span>关键词提示：</span>
      <el-tag
        v-for="hint in keywordHints"
        :key="hint"
        size="small"
        style="margin-right: 4px;cursor:pointer;"
        @click="onKeywordInput(hint)"
      >{{ hint }}</el-tag>
    </div>
    <el-table :data="list" stripe border v-loading="loading">
      <el-table-column label="企业名称" min-width="120">
        <template #default="{ row }">
          <el-link type="primary" @click="showDetail(row)">{{ row.enterpriseName || row.detail?.enterpriseName || '点击查看' }}</el-link>
        </template>
      </el-table-column>
      <el-table-column prop="industry" label="所属行业" min-width="100" />
      <el-table-column prop="scale" label="企业规模" min-width="100" />
      <el-table-column prop="address" label="企业地址" min-width="160" />
      <el-table-column label="联系方式" min-width="120">
        <template #default="{ row }">
          {{ row.contact || row.detail?.contact || '-' }}
        </template>
      </el-table-column>
    </el-table>
    <el-dialog v-model="showDialog" title="企业详情" width="500px">
      <el-descriptions v-if="currentDetail" :column="1" border>
        <el-descriptions-item label="企业名称">{{ currentDetail.enterpriseName }}</el-descriptions-item>
        <el-descriptions-item label="所属行业">{{ currentDetail.industry }}</el-descriptions-item>
        <el-descriptions-item label="企业规模">{{ currentDetail.scale }}</el-descriptions-item>
        <el-descriptions-item label="企业地址">{{ currentDetail.address }}</el-descriptions-item>
        <el-descriptions-item label="联系方式">{{ currentDetail.contact }}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </el-card>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import axios from '@/utils/axios'

const list = ref([])
const total = ref(0)
const loading = ref(false)
const searchForm = ref({ keyword: '', page: 1, size: 10 })
const showDialog = ref(false)
const currentDetail = ref(null)
const detailCache = ref({})
const keywordHints = ref([])

const fetchEnterpriseDetail = async (id) => {
  if (detailCache.value[id]) return detailCache.value[id]
  try {
    const res = await axios.get(`/enterprise/info/${id}`)
    detailCache.value[id] = res.data || res
    return detailCache.value[id]
  } catch (e) { return {} }
}

const fetchList = async () => {
  loading.value = true
  try {
    const params = { ...searchForm.value }
    if (!params.keyword) delete params.keyword
    const res = await axios.get('/enterprise/search', { params })
    const data = res.data || res
    list.value = data.list || []
    total.value = data.total || 0
    // 关键词提示（去重）
    keywordHints.value = [...new Set((data.list || []).map(item => item.enterpriseName).filter(Boolean))]
    // 批量查详情
    for (const row of list.value) {
      const detail = await fetchEnterpriseDetail(row.id)
      row.detail = detail
      if (detail.enterpriseName) row.enterpriseName = detail.enterpriseName
      if (detail.contact) row.contact = detail.contact
    }
  } catch (e) {}
  loading.value = false
}

const onPageChange = page => {
  searchForm.value.page = page
  fetchList()
}

const onKeywordInput = val => {
  searchForm.value.keyword = val
  searchForm.value.page = 1
  fetchList()
}

const showDetail = async (row) => {
  currentDetail.value = row.detail || await fetchEnterpriseDetail(row.id)
  showDialog.value = true
}

onMounted(fetchList)
</script>
<style scoped>
.enterprise-list-card {
  max-width: 1100px;
  margin: 40px auto;
  padding: 30px 20px;
}
.keyword-hints {
  margin-bottom: 10px;
  color: #888;
}
</style> 